<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">    
    <style>
        html{
            width: 100%;
            height: 100%;
        }
        body{
            background:url(lib/3.jpg) no-repeat;
            background-size: 100% 100%;
            position: fixed;
        }
        .box{
            width: 500px;
            height: 360px;
            border: 2px solid rgb(90, 85, 85);
            /* margin: 130px auto; */
            padding-top: 30px;
            padding-left: 50px;
            background-color: rgba(184, 182, 180,0.5);
            border-radius: 5px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
        }
        .box1 p{
            text-align: right;
        }
        .box1{
            width: 270px;
            position: absolute;
            top: 100px;
            right: 180px;
        }
        #register{
            position: absolute;
            bottom: 15px;
            left: 45%;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>用户注册</h2>
        <div class="box1"> 
            <p style="margin-top: 15px;">
                <label for="username" style="text-align:right">用户名：</label>
                <input type="text" id="username">
            </p>
            <p style="margin-top: 10px;">
                <label for="name">真实姓名：</label>
                <input type="text" id="name">
            </p>
            <p style="margin-top: 10px;">
                <label for="password">密码：</label>
                <input type="password" id="password">
            </p>
            <p style="margin-top: 10px;">
                <label for="password">确认密码：</label>
                <input type="password" id="repassword">
            </p>
            <div class="typecheck">
                <label class="radio-inline" style="margin-left: 12px;">
                    <input type="radio" name="sex" checked>学生
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="isTeacher">老师
                </label> 
            </div>   
        </div>
        <p>
            <button id="register" class="btn btn-primary">注册</button>
        </p>
    </div>

    <script src="lib/jquery.min.js"></script>
    <script src="common.js"></script>
    <script>
        $("#register").click(function(){
            let username = $("#username").val();
            let name = $("#name").val();
            let password = $("#password").val();
            let repassword = $("#repassword").val();                 

            if(username && name && password && repassword){
                if(password === repassword){
                    $.ajax({
                        url:`${address}/register`,
                        data:{
                            username,
                            name,
                            password,
                            usertype:$("#isTeacher")[0].checked ? 0 : 1
                        },
                        success(data){
                            if(data === "error"){
                                alert("注册失败")
                            }
                            else{
                                alert("注册成功")
                                location.href = `${address}/login.html`
                            }
                        }
                    })
                }
                else{
                    alert("密码和确认密码不一致！")
                }
            }
        })
    </script>

</body>
</html>